import { Tabs } from 'expo-router';
import { Platform, View } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: 'absolute',
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            borderTopWidth: 0,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: -4 },
            shadowOpacity: 0.08,
            shadowRadius: 12,
            backgroundColor: 'white',
            height: 90,
            paddingBottom: Platform.select({ ios: 34, default: 20 }), // 为 iOS 添加安全区域高度
            paddingTop: 10,
          },
          android: {
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            borderTopWidth: 0,
            elevation: 12,
            backgroundColor: 'white',
            height: Platform.select({ android: 90 + 16, default: 90 }), // 为 Android 添加安全区域高度
            paddingBottom: 20,
            paddingTop: 10,
          },
          default: {
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            borderTopWidth: 0,
            backgroundColor: 'white',
            height: 90,
            paddingBottom: 20,
            paddingTop: 10,
          },
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '拼图',
         tabBarIcon: undefined,
        }}
      />
      <Tabs.Screen
        name="create"
        options={{
          title: '',
          tabBarIcon: () => (
            <View style={{
              width: 60,
              height: 40,
              borderRadius: 16,
              backgroundColor: '#FF7A45',
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 15,
              shadowColor: '#FF7A45',
              shadowOffset: { width: 0, height: 4 },
              shadowOpacity: 0.3,
              shadowRadius: 8,
              elevation: 8,
            }}>
              <View style={{
                width: 24,
                height: 24,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
                <View style={{
                  width: 16,
                  height: 2,
                  backgroundColor: 'white',
                  position: 'absolute',
                }} />
                <View style={{
                  width: 2,
                  height: 16,
                  backgroundColor: 'white',
                  position: 'absolute',
                }} />
              </View>
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="main"
        options={{
          title: '我的',
          tabBarIcon: undefined,
        }}
      />
    </Tabs>
  );
}
